<template>
  <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
    <br><br>  
    <h1 style="font-size: 40px;">{{'欢迎你！'+user.username}}</h1>

      <el-button type="success" @click="edit" style= "margin-left: 1000px; 
      margin-top: 30px; width: 120px; height: 35px;" >
        修改个人信息</el-button>
      
      <el-descriptions class="el-descriptions"  title="个人中心" :column="2" size="80" border="true" >
        
          <el-descriptions-item label="账号">
              {{user.account}}
          </el-descriptions-item>
          <el-descriptions-item label="用户名">
              {{user.username}}
          </el-descriptions-item>
          <el-descriptions-item label="电话">
              {{user.tel}}
          </el-descriptions-item>
          <el-descriptions-item label="地址">
              {{user.address}}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
              <el-tag
                      :type="user.sex === '男' ? 'primary' : 'danger'"
                      disable-transitions><i :class="user.sex==1?'el-icon-male':'el-icon-female'"></i>{{user.sex}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="角色">   
              <el-tag
                      type="success"
                      disable-transitions>{{(user.roleid==1?"管理员":"用户")}}</el-tag>

          </el-descriptions-item>
      </el-descriptions>


      <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
    <span>
      <el-form  :model="form" ref="form" label-width="120px">
        <el-form-item label="账号" prop="account">
      <el-input v-model="form.account" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" />
    </el-form-item>
    <el-form-item label="昵称" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="form.sex">
        <el-radio label="男" />
        <el-radio label="女" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="电话" prop="tel">
      <el-input v-model="form.tel" />
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="form.address" />
    </el-form-item>
    </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

<br>
<br>
      <DateUtils></DateUtils>
  </div>
</template>

<script>
  import DateUtils from "./DateUtils.vue";
  import axios from 'axios';
  export default {
      name: "myHome",
      components: {DateUtils},
      data() {
          return {
              user:{},
              centerDialogVisible:false,
              form:{
        account:'',
        password:'',
        username:'',
        sex:'女',
        tel:'',
        address:'',
        //id:''
      }
          }
      },
      computed:{
      },
      methods:{
          init(){
              this.user = JSON.parse(sessionStorage.getItem('CurUser'))
          },
          resetForm(){
            this.$refs.form.resetFields();
                 },
          edit(){
            this.centerDialogVisible = true;
            this.$nextTick(()=>{
            this.resetForm();
            this.form = this.user;
            
      })
    },
    save(){
      this.$refs.form.validate((valid) => {
                    if (valid) {
                      if(this.form.id) {
                        this.doMod();
                      }else{
                        this.doSave();
                      }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });   
    },
    doSave(){
      axios.post('/user/save',this.form).then(response=> { 
        console.log(response.data)
        if(response.data.code == 200){
         this.$message({
              message:'新增成功！',
              type: 'success'
         });
         this.centerDialogVisible = false;
         this.getData();
        }else{
          this.$message({
              message:'新增失败，请重试！',
              type: 'error'
         });
        }
      })
    },
    doMod(){
      axios.post('/user/update',this.form).then(response=> { 
        console.log(response.data)
        if(response.data.code == 200){
         this.$message({
              message:'修改成功！',
              type: 'success'
         });
         this.centerDialogVisible = false;
         
        }else{
          this.$message({
              message:'修改失败，请重试！',
              type: 'error'
         });
        }
      })
    },
          doedit(){
        axios.post('/user/update',this.form).then(response=> { 
        console.log(response.data)
        if(response.data.code == 200){
         this.$message({
              message:'修改成功！',
              type: 'success'
         });
         this.centerDialogVisible = false;
         this.getData();
        }else{
          this.$message({
              message:'修改失败，请重试！',
              type: 'error'
         });
        }
      })
    },
      },
      created(){
          this.init()
      }
  }
</script>

<style scoped>
  .el-descriptions{
      width:90%;
      margin: 0 auto;
      text-align: center;
  }

</style>